<template>
  <div id="home">
    <!-- 头部导航 -->
    <nav id="topNavbar" class="navbar navbar-active navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">闪电<span class="pay">PAY</span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">{{$t('header.intro')}}</a></li>
            <li><a href="#">{{$t('header.plan')}}</a></li>
            <li><a href="#">{{$t('header.merchant')}}</a></li>
            <li><a href="#">{{$t('header.user')}}</a></li>
            <li class="language">
              <a style="cursor: pointer" @click="switchLanguage">中/英文</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 主体 -->
    <div class="banner-wrapper container-fluid">
      <div class="row">
          <div class="banner-mark"></div>
          <div class="banner-picture"></div>
          <div class="banner-title animated bounce">{{$t('home.banner.title')}}</div>
      </div>
    </div>
    <div class="main-wrapper container">
        <div class="main-ok">
            <i class="glyphicon glyphicon-ok"></i>
        </div>
        <div id="introduction" class="main-card introduction">
            <div id="introductionAni0" class="main-card-title">
                <div class="title-zn">{{$t('home.intro.title')}}</div>
                <div class="title-en hidden-xs">INTRODUCTION</div>
            </div>
            <div class="main-card-content container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="step-wrapper step-wrapper-1">
                            <div id="introductionAni1" class="animate-wrapper">
                                <img class="introduction-picture-1 animated slower infinite introductionAni" src="../../images/home/introduction-step-1.png"
                                    alt="introduction-step-1">
                                <div class="step-title">{{$t('home.intro.chip1.title')}}</div>
                                <div class="step-sub-title">{{$t('home.intro.chip1.subTitle')}}</div>
                            </div>
                            <div class="vertical-line vertical-line-left hidden-xs"></div>
                            <div class=" vertical-line vertical-line-right hidden-xs"></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="step-wrapper step-wrapper-2">
                            <div id="introductionAni2" class="animate-wrapper">
                                <img class="introduction-picture-2 animated slower infinite introductionAni delay-500ms"
                                    src="../../images/home/introduction-step-2.png" alt="introduction-step-2">
                                <div class="step-title">{{$t('home.intro.chip2.title')}}</div>
                                <div class="step-sub-title">{{$t('home.intro.chip2.subTitle')}}</div>
                            </div>
                            <div class=" vertical-line vertical-line-right hidden-xs"></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="step-wrapper step-wrapper-3">
                            <div id="introductionAni3" class="animate-wrapper">
                                <img class="introduction-picture-3 animated slower infinite introductionAni delay-1s" src="../../images/home/introduction-step-3.png"
                                    alt="introduction-step-3">
                                <div class="step-title">{{$t('home.intro.chip3.title')}}</div>
                                <div class="step-sub-title">{{$t('home.intro.chip3.subTitle')}}</div> </div> <div class=" vertical-line vertical-line-right hidden-xs">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="milestone" class="main-card milestone">
                <div id="milestoneAni0" class="main-card-title">
                    <div class="title-zn">{{$t('home.plan.title')}}</div>
                    <div class="title-en hidden-xs">MILESTONE</div>
                </div>
                <div class="main-card-content container">
                    <div class="row timer-step-black timer-step hidden-xs">
                        <div class="col-lg-6">
                            <div class="timer-liner timer-liner-left hidden-circle hidden-xs"></div>
                        </div>
                        <div class="col-lg-6">
                        </div>
                    </div>
                    <div class="row timer-step">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-10">
                                    <div id="milestoneAni1" class="timer-title-box">
                                        <div class="timer-title-inner-border"></div>
                                        <div>
                                            <div class="text-left">
                                                <span class="title-line"></span>01
                                                <small class="show-xs">({{$t('home.plan.chip1.date')}})</small>
                                            </div>
                                            <div class="">{{$t('home.plan.chip1.title')}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="timer-liner timer-liner-left hidden-xs"></div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-2 col-lg-5">
                                    <div id="milestoneAni2" class="timer-date-box hidden-xs">
                                        {{$t('home.plan.chip1.date')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row timer-step">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-5 col-lg-5">
                                    <div id="milestoneAni3" class="timer-date-box hidden-xs">
                                        {{$t('home.plan.chip2.date')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <div id="milestoneAni4" class="timer-title-box">
                                        <div class="timer-title-inner-border"></div>
                                        <div>
                                            <div class="text-left">
                                                <span class="title-line"></span>02
                                                <small class="show-xs">({{$t('home.plan.chip2.date')}})</small>
                                            </div>
                                            <div class="">{{$t('home.plan.chip2.title')}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="timer-liner timer-liner-right hidden-xs"></div>
                        </div>
                    </div>
                    <div class="row timer-step">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-10">
                                    <div id="milestoneAni5" class="timer-title-box">
                                        <div class="timer-title-inner-border"></div>
                                        <div>
                                            <div class="text-left">
                                                <span class="title-line"></span>03
                                                <small class="show-xs">({{$t('home.plan.chip3.date')}})</small>
                                            </div>
                                            <div class="">{{$t('home.plan.chip3.title')}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="timer-liner timer-liner-left hidden-xs"></div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-2 col-lg-5">
                                    <div id="milestoneAni6" class="timer-date-box hidden-xs">
                                        {{$t('home.plan.chip3.date')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row timer-step timer-step-last">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-5 col-lg-5">
                                    <div id="milestoneAni7" class="timer-date-box hidden-xs">
                                        {{$t('home.plan.chip4.date')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <div id="milestoneAni8" class="timer-title-box">
                                        <div class="timer-title-inner-border"></div>
                                        <div>
                                            <div class="text-left">
                                                <span class="title-line"></span>04
                                                <small class="show-xs">({{$t('home.plan.chip4.date')}})</small>
                                            </div>
                                            <div class="">{{$t('home.plan.chip4.title')}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="timer-liner timer-liner-right hidden-liner hidden-xs"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="merchants" class="main-card merchants">
                <div id="merchantsAni0" class="main-card-title">
                    <div class="title-zn">{{$t('home.merchant.title')}}</div>
                    <div class="title-en hidden-xs">MERCHANTS</div>
                </div>
                <div class="main-card-content container">
                    <div class="row">
                        <div class="col-lg-4 merchants-step merchants-step-1 text-left ">
                            <img id="merchantsAni1" class="merchants-picture-1" src="../../images/home/merchants-step-1.png"
                                alt="merchants-step-1">
                            <div class="step-num-wrapper">
                                <div class="bg-white text-center">
                                    <span class="step-num">1</span>
                                    <span class="step-label">{{$t('home.merchant.chip1.title')}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 merchants-step merchants-step-2">
                            <img id="merchantsAni2" class="merchants-picture-2" src="../../images/home/merchants-step-2.png"
                                alt="merchants-step-2">
                            <div class="step-num-wrapper">
                                <div class="bg-white">
                                    <span class="step-num">2</span>
                                    <span class="step-label">{{$t('home.merchant.chip2.title')}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 merchants-step merchants-step-3 text-right">
                            <img id="merchantsAni3" class="merchants-picture-3" src="../../images/home/merchants-step-3.png"
                                alt="merchants-step-3">
                            <div class="step-num-wrapper text-left">
                                <div class="bg-white text-center">
                                    <span class="step-num">3</span>
                                    <span class="step-label">{{$t('home.merchant.chip3.title')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-line hidden-xs hidden-sm hidden-md"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-lg-4 col-xs-offset-1 col-lg-offset-4">
                    <button data-toggle="modal" data-target="#myModal" id="apply" class="application-btn btn btn-primary btn-lg btn-block" type="button">{{$t('home.apply')}}</button>
                </div>
            </div>
        </div>
        <div id="download" class="download-wrapper container-fluid">
            <div class="download-inner-wrapper container">
                <div class="downlaod-title">{{$t('home.download.title')}}</div>
                <div class="downlaod-sub-title">{{$t('home.download.subTitle')}}</div>
                <div class="row">
                    <div id="downloadLeft" class="col-lg-6">
                        <div class="hidden-xs hidden-sm hidden-md hold-up-top"></div>
                        <div class="download-btns">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="download-btn">
                                        <i class="download-icon icon-andriod"></i>
                                        {{$t('home.download.android')}}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="download-btn">
                                        <i class="download-icon icon-ios"></i>
                                        {{$t('home.download.ios')}}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="download-btn more">
                                      {{$t('home.download.more')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="downloadRight" class="col-lg-6">
                        <div id="downloadPicture" class="download-picture">
                            <img class="dowload-device" src="../../images/home/download-picture.png" alt="device">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-wrapper container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2 contact-us">
                        <div class="">{{$t('footer.contact')}}</div>
                        <div class="">newpay138@gmail.com</div>
                    </div>
                    <div class="col-lg-10 footer-icons">
                        <i class="footer-icon icon-facebook active"></i>
                        <i class="footer-icon icon-twitter"></i>
                        <i class="footer-icon icon-wechat"></i>
                        <i class="footer-icon icon-sina"></i>
                    </div>
                </div>
            </div>
        </div>
        <apply-dialog></apply-dialog>
  </div>
</template>

<script>
import ApplyDialog from './dialog/ApplyDialog'
export default {
  name: 'home',
  components: {
    ApplyDialog
  },
  data () {
    return {
      windowH: null,
      introductionSt: null,
      milestoneSt: null,
      merchantsSt: null,
      downloadSt: null,
      leaveTop: false,
      introductionFlag: false,
      milestoneFlag: false,
      merchantsFlag: false,
      downloadFlag: false, 
    }
  },
  mounted () {
    this.windowH = $(window).height()
    this.introductionSt = $('#introduction').offset().top - this.windowH
    this.milestoneSt = $('#milestone').offset().top - this.windowH
    this.merchantsSt = $('#merchants').offset().top - this.windowH
    this.downloadSt = $('#download').offset().top - this.windowH

    $(window).scroll(() => {
      var t = document.documentElement.scrollTop||document.body.scrollTop
      // 顶部动效
      if (!this.leaveTop && t > 50) {
        this.leaveTop = true
        $('#topNavbar').addClass('navbar-active')
      } else if (this.leaveTop && t <= 50) {
        this.leaveTop = false
        $('#topNavbar').removeClass('navbar-active')
      }

      // 产品介绍
      if (!this.introductionFlag && t >= this.introductionSt) {
        this.introductionFlag = true
        $('#introductionAni0').addClass('animated flipInX')
        $('#introductionAni1').addClass('animated zoomIn')
        $('#introductionAni2').addClass('animated delay-1s zoomIn')
        $('#introductionAni3').addClass('animated delay-2s zoomIn')
      }

      // 产品规划
      if (!this.milestoneFlag && t >= this.milestoneSt) {
        this.milestoneFlag = true
        $('#milestoneAni0').addClass('animated flipInX')
        $('#milestoneAni1').addClass('animated delay-1s fadeInRight')
        $('#milestoneAni2').addClass('animated delay-1s fadeInLeft')
        $('#milestoneAni3').addClass('animated delay-2s fadeInRight')
        $('#milestoneAni4').addClass('animated delay-2s fadeInLeft')
        $('#milestoneAni5').addClass('animated delay-3s fadeInRight')
        $('#milestoneAni6').addClass('animated delay-3s fadeInLeft')
        $('#milestoneAni7').addClass('animated delay-4s fadeInRight')
        $('#milestoneAni8').addClass('animated delay-4s fadeInLeft')
        setTimeout(function () {
          $('#milestoneAni1').removeClass('fadeInRight')
          $('#milestoneAni1').addClass('milestoneAni infinite slow')
        }, 2000)
        setTimeout(function () {
          $('#milestoneAni4').removeClass('fadeInRight')
          $('#milestoneAni4').addClass('milestoneAni infinite slow')
        }, 3000)
        setTimeout(function () {
          $('#milestoneAni5').removeClass('fadeInRight')
          $('#milestoneAni5').addClass('milestoneAni infinite slow')
        }, 4000)
        setTimeout(function () {
          $('#milestoneAni8').removeClass('fadeInRight')
          $('#milestoneAni8').addClass('milestoneAni infinite slow')
        }, 4000)
      }

      // 成为商家
      if (!this.merchantsFlag && t >= this.merchantsSt) {
        this.merchantsFlag = true
        $('#merchantsAni0').addClass('animated flipInX')
        $('#merchantsAni1').addClass('animated fadeInUp')
        $('#merchantsAni2').addClass('animated fadeInUp delay-1s')
        $('#merchantsAni3').addClass('animated fadeInUp delay-2s')
        $('#apply').addClass('animated fadeInUp delay-3s')
        setTimeout(function () {
          $('#merchantsAni1').removeClass('fadeInUp')
          $('#merchantsAni1').addClass('merchantsAni infinite slow')
        }, 1000)
        setTimeout(function () {
          $('#merchantsAni2').removeClass('fadeInUp')
          $('#merchantsAni2').addClass('merchantsAni infinite slow')
        }, 2000)
        setTimeout(function () {
          $('#merchantsAni3').removeClass('fadeInUp')
          $('#merchantsAni3').addClass('merchantsAni infinite slow')
        }, 3000)
      }

      // 下载
      if (!this.downloadFlag && t >= this.downloadSt) {
        this.downloadFlag = true
        $('#downloadLeft').addClass('animated fadeInLeft delay-1s')
        $('#downloadRight').addClass('animated fadeInRight delay-1s')
        $('#downloadPicture').addClass('animated downloadAni infinite slower delay-2s')
      }
    })
  },
  methods: {
    switchLanguage() {
      let locale = this.$i18n.locale
      locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' 
    }
  }
}
</script>

